<template>
  <div class="insertgamecomp">
    <div class="insertitem">
      <div class="insertlable">类别名称</div>
      <div>
        <el-input v-model="typeName" placeholder="请输入内容"></el-input>
      </div>
    </div>

    <div class="insertitem">
      <div class="insertlable">游戏图标</div>

      <el-upload
        ref="iconImg"
        action="string"
        :limit="1"
        :file-list="fileicoImg"
        :http-request="insertImg"
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        :on-remove="removeIconImg"
      >
        <i class="el-icon-plus"></i>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" src="dialogImageUrl" alt="" />
      </el-dialog>
    </div>

    <div class="insertitem">
      <div class="complete">
        <el-button @click="complete" type="primary">{{ completes }}</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import {
  insertGameImg,
  getGameTypeById,
  addGameTypes,
  updateGameTypes,
} from "../../network/admin";
export default {
  name: "AdminGameCate",
  data() {
    return {
      typeName: "",
      icoImg: "",
      fileicoImg: [],
      completes: "完成",
      gtId: this.$route.query.gtId,
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
    };
  },

  created() {
    if (this.gtId != undefined) {
      this.completes = "修改";
      this.getMessage();
    }
  },

  methods: {
    getMessage() {
      getGameTypeById(this.gtId).then((res) => {
        this.typeName = res.data.data.gtName;
        let icoImgCun = [
          {
            url: res.data.data.gtImg,
          },
        ];
        this.fileicoImg = icoImgCun;
      });
    },

    insertImg(file) {
      let params2 = new FormData();
      params2.append("files", file.file);
      insertGameImg(params2).then((res) => {
        this.icoImg = res.data.data[0];
        console.log(this.icoImg);
      });
    },

    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },

    removeIconImg(file) {
      let uploadFiles = this.$refs.iconImg.uploadFiles;
      for (let i = 0; i < uploadFiles.length; i++) {
        if (uploadFiles[i]["url"] == file.url) {
          uploadFiles.splice(i, 1);
        }
      }
    },

    complete() {
      if (this.gtId == undefined || this.gtId == null) {
        addGameTypes(this.icoImg, this.typeName).then(() => {
          this.$alert("修改成功", "提示", {
            confirmButtonText: "确定",
            callback: () => {
              location.reload();
            },
          });
        });
      } else {
        updateGameTypes(this.gtId, this.icoImg, this.typeName).then(() => {
          this.$alert("修改成功", "提示", {
            confirmButtonText: "确定",
            callback: () => {
              this.$router.push("/admingamecate");
            },
          });
        });
      }
    },
  },
};
</script>

<style>
</style>